<template>
  <div>
    <el-dialog
      width="40%"
      class="WholeScroll"
      :visible.sync="formShow"
      @close="handleClickDeal('cancel')"
      v-dialog-drag
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <span slot="title">
        <i class="iconfont icon-hetongguanli"></i>
        <span>{{ title }}</span>
      </span>
      <div class="WholeScroll" style="max-height: 550px; overflow: auto">
        <el-form
          :model="formBaseData"
          ref="formBaseData"
          :rules="formBaseRules"
        >
          <el-row>
            <el-col :span="23">
              <el-form-item
                label="设备名称"
                prop="name"
                :label-width="formlabelWidth"
              >
                <el-input placeholder="请输入设备名称" v-model="formBaseData.cameraName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="23">
              <el-form-item
                label="选择项目"
                prop="orderDate"
                :label-width="formlabelWidth"
              >
                <el-select
                  style="width: 100%"
                  v-model="formBaseData.projectId"
                  clearable
                  placeholder=""
                  :disabled="detailType === 'check' || detailType === 'approve'"
                >
                  <el-option
                    v-for="(item, i) in projectList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="23">
              <el-form-item
                label="选择标段"
                prop="orderDate"
                :label-width="formlabelWidth"
              >
                <el-select
                  style="width: 100%"
                  v-model="formBaseData.sectionId"
                  clearable
                  placeholder=""
                  :disabled="detailType === 'check' || detailType === 'approve'"
                >
                  <el-option
                    v-for="(item, i) in sectionList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="23">
              <el-form-item
                label="地址"
                prop="type"
                :label-width="formlabelWidth"
              >
                <el-input  placeholder="请输入地址" v-model="formBaseData.path"></el-input>
              </el-form-item>
            </el-col>
          </el-row><el-row>
            <el-col :span="23">
              <el-form-item
                label="分类"
                prop="type"
                :label-width="formlabelWidth"
              >
                <el-input  placeholder="请输入分类" v-model="formBaseData.type"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
    <!--      <el-row>
            <el-col :span="23">
              <el-form-item
                label="控制性工程"
                prop="orderDate"
                :label-width="formlabelWidth"
              >
                <el-radio-group v-model="formBaseData.isControlProject">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>-->
          <el-row>
            <el-col :span="23">
              <el-form-item
                label="设备重命名"
                :label-width="formlabelWidth"
              >
                <el-input placeholder="请输入设备重命名" v-model="formBaseData.newName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
         <el-row>
            <el-col :span="23">
              <el-form-item
                label="设备经度"
                :label-width="formlabelWidth"
              >
                <el-input placeholder="请输入设备经度" v-model="formBaseData.longitude"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="23">
              <el-form-item
                label="设备纬度"
                :label-width="formlabelWidth"
              >
                <el-input placeholder="请输入设备纬度" v-model="formBaseData.latitude"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <template v-if="detailType === 'build' || detailType === 'edit'">
          <el-button
            size="small"
            type="primary"
            :loading="isLoading"
            @click="handleClickDeal('submit', { flag: 1 })"
          ><i class="iconfont icon-icon_save"></i> 确 定
          </el-button>
        </template>
        <el-button size="small" @click="handleClickDeal('cancel')"
        ><i class="iconfont icon-icon_cancel"></i> 取 消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const urlBussBase = 'video'
import {getOne,getProject,save,edit} from '@/api/buss/video'

export default {
  name: urlBussBase + '-manage-detail',
  components: {
    //  审核用
    // audit_component: require("../../../../../components/audit/audit").default
  },
  props: {
    postDetail: {
      type: Object,
      default: {
        show: false,
        type: 'build',
        params: {},
      },
    },
  },
  watch: {
    postDetail(value) {
      console.log(value)
      // 显示详情弹窗
      this.formShow = value.show
      // 初始化窗口参数
      this.activeName = 'first'
      // 详情类型
      this.detailType = value.type
      this.detailId = value.params.detailId
      if (this.detailType !== 'build') {
        this.getDetail()

      }
      this.getProject()
    },
  },
  data() {
    return {
      urlBussBase: 'video',
      isLoading: false,
      detailType: 'build', // 详情类型 build新建 check不可编辑查看 edit编辑
      detailId: '', // 当前详情的id
      formShow: false, // 表单展示
      formlabelWidth: '120px', // 表单左侧标题宽度
      formlabelRightWidth: '150px', // 表单左侧标题宽度
      formlabelWidth2: '120px', // 表单左侧标题宽度
      title: '视频设备信息维护',
      activeName: 'first',
      projectList: [],
      // 所有下拉框列表的集合
      selectList: {
        project:[],
        status: [
          {
            name: '进行中',
            id: '1'
          },
          {
            name: '已批复',
            id: '2'
          }
        ],
      },
      list:[],
      // 表单基本信息内容
      formBaseData: {
        name:'',
        projectId:'',
        newName:'',
        type:'',
        longitude:'',
        latitude:'',
        cameraName:'',
        position:'',
      },
      // 表单基本信息验证
      formBaseRules: {
        projectId: [
          { required: true, message: '请选择' + '项目', trigger: 'change' },
        ]
      },
    }
  },
  methods: {
    getDetail(){
      getOne(this.detailId).then(res => {
        this.formBaseData = res.data
      })
    },
    submitDetail(type, callback) {
      if (this.detailType === 'build') {
        save(this.formBaseData).then(res => {
          if(callback){
            callback()
          }
        })
      } else {
        edit(this.formBaseData).then(res => {
          if(callback){
            callback()
          }
        })
      }

    },
    getProject(){
      this.$httpPost('/buss/video/getTreeWithOutVideo', {})
        .then((res) => {
          if (res.code === 200) {
            this.projectList = res.data
          }
        })
        .catch((res) => {
          this.$messageError(this.$route.name + '请求失败')
        })
    },
    // 点击各个流程的按钮事件
    handleClickDeal(type, res) {
      console.log(type, res)
      switch (type) {
        // 取消，关闭窗口
        case 'cancel':
          // 重置表单验证
          this.$refs['formBaseData'].resetFields()
          this.formBaseData = {
            name:'',
            projectId:'',
            newName:'',
            type:'',
            longitude:'',
            latitude:'',
            cameraName:'',
            position:'',
            id:'',
          }
          this.projectList = []
          // 关闭弹窗
          this.formShow = false
          break
        // 保存
        case 'submit':
          let flag = res.flag
          // 表单验证
          this.$refs['formBaseData'].validate((valid) => {
            if (valid) {
              this.isLoading = true
              // 提交详情
              this.submitDetail(flag, () => {
                // this.$refs.cmsFileTables.bindAllFile(this.detailId)
                this.formShow = false
                this.isLoading = false
                // 传值给父组件刷新列表
                this.$emit('reloadList')
              })
            } else {
              this.isLoading = false
            }
          })
          break
      }
    },
  },
  computed: {
    // companyList () {
    //   return this.companyTree || []
    // },
    sectionList () {
      if (this.projectList.length > 0) {
        const project = this.projectList.find(item => item.id === this.formBaseData.projectId)
        return project ? project.children : []
      }
      return []
    }
  },
}
</script>

<style scoped lang="scss">
  .el-select.half {
    width: 250px;
  }

  .el-select.fill {
    width: 800px;
  }

  .contract_input {
    width: 250px;
  }

  .contract_input2 {
    width: 240px;
  }

  .el-input .el-select {
    width: 130px;
  }

  .fee_add {
    color: #008fe0;
    border-color: #008fe0;
    float: right;
    margin-bottom: 10px;
  }
</style>
